import Taro from '@tarojs/taro';
import { View, Input, Text } from '@tarojs/components';
import http from '@/utils/http';
import utils from '@/utils/util';
import { get as getGlobalData } from '@/global'
import './index.scss'

export default class UpdatePassword extends Taro.Component {
    constructor(props) {
        super(props);
        this.state = {
            userInfo: null,
            currentPassword: '',
            newPassword: '',
            newConfirmPassword: ''
        }
    }
    componentWillMount() {
        let userInfo = getGlobalData('userInfo') || utils.getUserInfo();
        this.setState({
            userInfo: userInfo,
        })
    }
    config = {
        navigationBarTitleText: '修改密码'
    }
    handleChange(e) {
        this.setState({
            [e.target.dataset.name]: e.detail.value.replace(/[\u4e00-\u9fa5]/ig, '').replace(/\s+/g, '')
        })
    }
    updatePassword() {
        let { currentPassword, newPassword, newConfirmPassword, userInfo } = this.state;
        if (currentPassword === newPassword) {
            return utils.showtoast('新密码与原密码一致');
        }
        if (newPassword.length < 6) {
            return utils.showtoast('密码长度少于6位')
        }
        if (newPassword !== newConfirmPassword) {
            return utils.showtoast('密码两次输入不一致')
        }
        http.post('updatePassword', {
            userid: userInfo.id,
            currentPassword,
            newPassword,
            newConfirmPassword
        }, false, true, true).then(() => {
            utils.showtoast('密码修改成功，请重新登录！', null, 1500, true)
            setTimeout(()=>{
                Taro.reLaunch({ // 去登录页
                    url: '/pages/login/index',
                })
            },1500)
        }).catch((e) => {
            console.log(e);
        })
    }
    render () {
        const { currentPassword, newPassword, newConfirmPassword} = this.state;
        return (
            <View className='update-password pt-6'>
                <View className='flex from-item pl-5 pr-5'>
                    <Input type='password' value={currentPassword} maxLength='8' data-name='currentPassword' onInput={(event) => this.handleChange(event)} className='from-item-input flex-1 pl-1-5 ft28 line-b' placeholder='请输入当前密码' />
                </View>
                <View className='flex from-item pl-5 pr-5'>
                    <Input maxLength='16' type='password' value={newPassword} data-name='newPassword' onInput={(event) => this.handleChange(event)} className='from-item-input flex-1 pl-1-5 ft28 line-b' placeholder='请输入新密码' />
                </View>
                <View className='flex from-item pl-5 pr-5'>
                    <Input maxLength='16' type='password' value={newConfirmPassword} data-name='newConfirmPassword' onInput={(event) => this.handleChange(event)} className='from-item-input flex-1 pl-1-5 ft28 line-b' placeholder='再次输入新密码' />
                </View>
                <Text className='mt-1-5 ft22 fc_333 pl-6-5 pr-5'>6-16位密码、数字或字母</Text>
                <View onClick={() => { currentPassword && newPassword && newConfirmPassword ? this.updatePassword() : '' }} className={`default-btn update-btn ft28  ${currentPassword && newPassword && newConfirmPassword  ? '' : 'off'}`}>完成</View>
            </View>
        )
    }
}